<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/vote.css}"/>
    <link rel="stylesheet" th:href="@{/css/daohang.css}"/>


</head>
<body bgcolor="">


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
    <legend><span class="" style="font-size: 14px">
  <a href="">投票<span class="layui-box">&gt;</span></a>
  <a href="">参与投票<span class="layui-box">&gt;</span></a>
</span>
    </legend>
</fieldset>
<div class="layui-form-item">
    <label class="layui-form-label" style="width: 700px">参考积分排名：</label><input type="button" class="layui-btn layui-btn-normal" id="jfpm" value="积分排名"/>
</div>

<div class="site-demo-button bo" id="layerDemo" style="margin-bottom: 0;">
    <div lay-skin="line" class="tips zhong">
    </div>
</div>
<table id="LAY_table_user" lay-filter="demo"></table>

<!--
<div class="kk">
    <img style="width: 180px;height: auto;" src="//cdn.layui.com/upload/2017_10/4237464_1509454151627_41017.jpg"/>
    <hr />
    <div class="layui-form-item" >
        <label class="layui-form-label qins">寝室604</label>
        <p class="piao">票数:<a>12</a></p>
    <button class="layui-btn tou">投票</button>
    </div>
</div>
-->


<script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/js/jquery-3.2.1.js}"></script>

<script>
    $(function () {
        $.get('/dor/VC', function (data) {
            var htmls = []

            data.forEach(
                function (item, index) {
                    var demo = '<div class="kk">' + '<img style="width: 180px;height: 140px" src="' + item.img + '" id="imgId"/>'
                        + '<hr />' + '<div class="layui-form-item" >' + '<label class="layui-form-label qins">'
                        + '寝室' + item.fang + '</label>' + '<p class="piao">' + '票数:' + '<a >' + item.count +
                        '</a>' + '</p>' + '<button class="layui-btn" onclick="toupiao(this, ' + item.id + ', ' + item.roomId +')">' + '投票' + '</button>' + '</div>' + '</div>'

                    htmls.push(demo)
                })


            $('.tips').html(htmls.join(''))
            layui.use('layer', function () { //独立版的layer无需执行这一句
                var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
            })
        })
    })

    function toupiao(n, id, roomId) {

        $.get("/dor/testVote/" + id, function (data) {
            if (data) {
               /* if (confirm('是否确定投票！')) {*/
                layer.confirm('确认投票', function (index) {
                    $.get("/dor/addVC/" + id, function (data) {
                        var par = $(n).parents('.layui-form-item');
                        var count = $(par).children('.piao');
                        var s = $(count).children('a').html();
                        $(count).children('a').html(parseInt(s) + 1);
                        layer.close(index);
                    });
                })
            } else {
                layer.confirm('您已投了票！', function (q) {
                    layer.close(q);

                })
            }
        })
    };

    $.get('/dor/VCC',function (data) {
        /*alert(data)*/

        /*  var flag = [[${voteCount}]];
         console.log(flag);*/
        if (data === 0) {
            layer.open({
                content: '暂时无人报名'
            });
        }
    })
</script>
<script>
    $('#jfpm').on('click',function () {
        layer.open({
            type : 2,
            content: '/dor/stuJfpm',
            area: ['400px', '500px']
        });
    })


</script>
<!--<script>
    layui.use('table', function() {
        var table = layui.table;
        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            , url: '/dor/jifenmain'
            , cols: [[
                {checkbox: true, fixed: true}
                /*, {field: 'id', title: 'ID', width: 120, sort: true, fixed: true}*/
                , {field: 'fang', title: '寝室号', width: 180, sort: true}
                , {field: 'score', title: '积分', width: 180, sort: true}
                /* , {field: '', title: '操作', width: 135, toolbar: '#barDemo'}*/
            ]]
            , id: 'LAY_table_user'
            , page: true
            , height: 0
        });

        var $ = layui.$, active = {
            reload: function(){
                var query2 = $('#r_id').val()
                table.reload('LAY_table_user', {
                    where: {
                        rid : query2
                    }
                });
            }
        };

        $('#ss').on('click', function(e){
            e.preventDefault()
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    })
</script>-->

</body>
</html>